<!--
 * @Author: hfWang
 * @Date: 2022-07-25 19:05:31
 * @LastEditTime: 2022-10-19 20:07:21
 * @Description: file content
 * @FilePath: \blog\docs\.vitepress\theme\MyTheme\MyLayout.vue
-->
<script setup lang="ts">
import DefaultTheme from "vitepress/theme";
import MySearch from "../MyComps/MySearch.vue";
import { useData } from "vitepress";

const { Layout } = DefaultTheme;
const { page } = useData();
// console.log("page", page);
</script>

<template>
	<Layout>
		<!-- 导航栏右侧 -->
		<template #nav-bar-content-before>
			<MySearch style="margin-left: 20px" />
		</template>
		<!-- 首页banner图 -->
		<template #home-hero-before>
			<div class="my-home-hero-before">
				<img src="/logo.png" alt="图片" style="width: 100%" />
			</div>
		</template>
		<!--文章主体-->
		<template #doc-before v-if="page.value?.frontmatter">
			<div v-if="page.value.frontmatter?.title" class="title">
				{{ page.value.frontmatter.title }}
			</div>
			<div v-if="page.value.frontmatter?.desc" class="top-tip">
				<p class="tip">Tip:</p>
				{{ page.value.frontmatter?.desc }}
			</div>
		</template>
		<!--右侧边栏快速前往标题-->
		<template #aside-top>
			<div class="mb-20 fs-20 color">霞露小伙 — HfWang</div>
		</template>
		<!--右侧边栏底部图片-->
		<template #aside-bottom>
			<div class="aside-bottom-img">
				<img src="/h.png" alt="" />
			</div>
		</template>
	</Layout>
</template>

<style scoped>
.my-home-hero-before {
	position: relative;
	width: 100%;
	height: 100%;
}

.my-home-hero-before .logo-text {
	position: absolute;
	font-size: 100px;
	font-style: oblique;
	font-weight: 700;
	color: #fff;
	top: 200px;
	left: 100px;
}

.color {
	color: var(--vp-c-brand-light);
}

.fs-26 {
	font-size: 26px;
}

.fs-20 {
	font-size: 20px;
}

.mb-40 {
	margin-bottom: 40px;
}

.mb-20 {
	margin-bottom: 20px;
}

.title {
	font-size: 28px;
	font-weight: 700;
	padding-bottom: 40px;
}

.top-tip {
	margin-bottom: 40px;
	font-size: 12px;
	background: rgba(179, 222, 239, 0.2);
	border: 1px solid var(--vp-c-green-light);
	padding: 10px;
	border-radius: 8px;
	color: var(--vp-c-green-light);
}

.top-tip .tip {
	font-size: 16px;
	margin-bottom: 8px;
	color: var(--vp-c-green-light);
}

.aside-bottom-img img {
	border-radius: 8px;
}
</style>

<style>
.title-text,
.link-text:hover {
	color: var(--vp-c-brand-light) !important;
}
</style>
